<template>
  <div class="target_task">
    <div class="left-menu">
      <el-menu
        :default-active="activeKey"
        text-color="#000"
        active-text-color="var(--primary-color)"
        class="el-menu-vertical-demo"
        @select="handleSelect"
      >
        <el-submenu index="1">
          <template slot="title">
            <i class="el-icon-aim"></i>
            <span>目标管理</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="1-1">团队目标</el-menu-item>
            <el-menu-item index="1-2">个人目标</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-menu-item index="2">
          <template slot="title">
            <i class="el-icon-tickets"></i>
            <span>我的任务</span>
          </template>
        </el-menu-item>
      </el-menu>
    </div>
    <div class="right-content">
      <template v-if="$route.path === '/home/target-task'">
        <myTask v-if="activeKey == '2'" :key="activeKey" :is-home="true"></myTask>
        <groupAim v-else :key="activeKey" :key-index="activeKey"></groupAim>
      </template>
      <router-view v-else></router-view>
    </div>
  </div>
</template>

<script>
import myTask from '@/views/warning-task/task/index.vue'
import groupAim from '@/views/aim/my-aim-list.vue'
export default {
  name: 'Home',
  components: {
    groupAim,
    myTask,
  },
  data() {
    return {
      activeKey: '1-1',
    }
  },
  created() {
    this.activeKey = this.$route.query.isHome ? '2' : '1-1'
  },
  methods: {
    handleSelect(key, keyPath) {
      this.activeKey = key
      console.log(key, keyPath)
    },
  },
}
</script>

<style lang="scss" scoped>
.target_task {
  display: flex;
  height: 100%;

  .left-menu {
    width: 240px;
    background-color: #fff;
    margin-right: 20px;
    height: 100%;
  }

  .right-content {
    flex-grow: 1;
    overflow-y: auto;
    height: 100%;
  }
}
</style>
